﻿<!DOCTYPE html>
<html>
<head>
    <title>swiper</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta charset="utf-8" />
    <link href="css/base.2.1.0.css" rel="stylesheet" />
    <script src="js/jquery-3.1.0.min.js"></script>
    <style type="text/css">
        .swiper-wrap { overflow: hidden; }
        .swiper-wrap .swiper-inner{ display:flex; flex-wrap: nowrap;/*transition: all .3s ease-in-out;*/}
        .swiper-inner .swiper-item { flex-shrink: 0; box-sizing: content-box;  }
        #text { line-height:22px; background-color:#f1f1f1; }
    </style>
</head>
<body>
    <div class="swiper-wrap">
        <div class="swiper-inner" style="transform: translateX(0);">
            <div class="swiper-item"><img src="http://oss.cubiauto.com/1495011915290119.jpg" alt="" class="max-img"/></div>
            <div class="swiper-item"><img src="http://oss.cubiauto.com/1491014334889011.jpg" alt="" class="max-img" /></div>
            <div class="swiper-item"><img src="http://oss.cubiauto.com/1494015892815366.jpg" alt="" class="max-img" /></div>
        </div>
    </div>
    <div class="text-center" id="text"></div>
    <div class="text-center" id="text2"></div>
    <script type="text/javascript">
        var touches = {
            startX: 0,
            startY: 0,
            currentX: 0,
            currentY: 0,
            diff: 0
        };
        var isTouched, isMoved, startTranslate, swipeDirection, touchStartTime;
        
        var translate = 0;


        $(function () {

            var snapGrid = [], wWidth = $(window).width();
            for (var i = 0; i < $(".swiper-wrap .swiper-item").length; i++) {
                snapGrid.push(i * wWidth);
            }
            console.log(snapGrid)

            minTranslate = function () {
                return (-snapGrid[0]);
            };
            maxTranslate = function () {
                return (-snapGrid[snapGrid.length - 1]);
            };

            $(".swiper-wrap .swiper-item").width($(window).width());
            $(".swiper-inner").on("touchstart", function (e) {
                isTouched = true;
                isMoved = false;

                var startX = touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
                var startY = touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;

                touches.startX = startX;
                touches.startY = startY;

                if (e.type !== 'touchstart') {
                    var preventDefault = true;
                    if ($(e.target).is(formElements)) preventDefault = false;
                    if (document.activeElement && $(document.activeElement).is(formElements)) {
                        document.activeElement.blur();
                    }
                    if (preventDefault) {
                        e.preventDefault();
                    }
                }

            }).on("touchmove mousedown", function (e) {
                e = e || window.event;
                e = e.touches ? e.touches[0] : e;
                _movie(e);
                console.log(e.pageX);
                //console.log('start');
                //$(this).on('mousemove', function (e) {
                //    e = e || window.event;
                //    e = e.touches ? e.touches[0] : e;
                //    _movie(e);
                //});
                //$(this).on('mouseup', function (e) {
                //    $(this).off('mousemove')
                //    if (this.releaseCapture) {
                //        this.releaseCapture();
                //    }
                //});
                return false;
            }).on('touchend', function (e) {
                
                var startX = touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
                var startY = touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;

                isTouched = isMoved = false;
                //$(".swiper-inner").css("transform", "translateX(" + x + "px)");
                console.log('end');

                // Time diff
                var touchEndTime = Date.now();
                var timeDiff = touchEndTime - touchStartTime;
            })

            var _movie = function (e) {

                touches.startX = touches.currentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
                touches.startY = touches.currentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
                touchStartTime = Date.now();

                if (
                       (touches.currentY < touches.startY && translate <= maxTranslate()) ||
                       (touches.currentY > touches.startY && translate >= minTranslate())
                       ) {
                    return;
                }


                isMoved = true;
                touches.currentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
                touches.currentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;

                var diff = touches.diff = touches.currentX - touches.startX;
                diff = -diff;

                swipeDirection = diff > 0 ? 'prev' : 'next';

                var currentTranslate = diff + startTranslate;




                $("#text").text(touches);
                //$(".swiper-inner").css("transform", "translateX(" + i.x + "px)");
            };
        })
    </script>
</body>
</html>
